<script lang='ts' setup name='App'>  
 import { ref } from 'vue' 

  const show = ref(true);
 

function toggle(){
  //控制变量true/false
  show.value = !show.value
}


</script>  
  
<template>  
    <!-- 条件渲染 -->
    <button @click="toggle">展示/隐藏</button>
    <!-- v-if指令 -->
    <div class="d1" v-if="show">
        asjasjfasjfasf
    </div>


    <!-- v-show 指令 -->
    <div class="d2" v-show="show">
        asjasjfasjfasf
    </div>



</template>  
  
<style scoped>  
.d1 , .d2{
  border: solid 1px grey;
  border-radius: 15px;
  width: 300px;
  height: 300px;
  box-shadow: 0 0 10px green;
  margin: 20px;
  padding: 10px;


}
</style>  